<!DOCTYPE html>
<html>

<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">
        html,
        body {
            background-color: slategrey;
            text-align: center;
        }

        #enter {
            color: aliceblue;
            margin-top: 50px;
            padding-bottom: 10px;
            font-size: 30px;
        }

        #input {
            width: 700px;
            margin: 10px auto 20px;
        }
    </style>

</head>

<body>
    <div id="enter">输入RTSP视频流</div>
    <div id="input"><input type="text" id="rtsp" style="width:80%;height:25px;"><button id="submit">确认</button></div>
    <canvas id="video-canvas"></canvas>

    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
        button = document.getElementById("submit")
        button.addEventListener("click", () => {
            const rtsp = document.getElementById("rtsp").value
            const canvas = document.getElementById('video-canvas');
            const url = 'ws://' + document.location.hostname + ':7777/ws/' + rtsp;
            const player = new JSMpeg.Player(url, { canvas: canvas });
        })
    </script>
</body>

</html>